@import '../styles/index';

.wrapper {
  background: var(--section-alt);
  position: relative;
  width: 52px;
  height: 0;
  padding-top: 6px;
  flex-grow: 1;
  flex-basis: 0;
  overflow: hidden;
}

.scroll {
  overflow-y: auto;
  height: 100%;

  &::-webkit-scrollbar {
    display: none;
  }
}

.app-tab {
  position: relative;
  background: var(--background);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-bottom: 6px;
  margin-left: 6px;
  overflow: hidden;

  i,
  img,
  div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  img,
  div {
    width: 40px;
    height: 40px;
  }

  img {
    pointer-events: none;
  }

  &:hover {
    cursor: pointer;
  }
}

.active-app {
  .radius();

  position: absolute;
  top: 0;
  height: 40px;
  width: 10px;
  background: var(--title);
  transform: translateX(-12px);
  transition: transform 0.2s;
}

.active-app.active {
  transform: translateX(-6px);
}

.refresh-icon {
  position: absolute;
  background: var(--section);
  height: 20px;
  width: 20px;
  border-radius: 50%;
  bottom: 0;
  right: 0;

  i {
    position: absolute;
    left: 3px;
    top: 3px;
  }
}

.arrow {
  width: 52px;
  height: 24px;
  position: absolute;
  background: var(--section-alt);

  i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  &:hover {
    cursor: pointer;
  }
}

.arrow.up {
  top: 0;

  i {
    transform: translate(-50%, -50%) rotate(180deg);
  }
}

.arrow.down {
  bottom: 0;
}
